//知识点巩固练习
// 1.定义路由组件
// 2.创建路由模块
// 3.导入并挂载路由模块
// 4.定义路由链接和路由视图
// 5.路由重定向
// 6.嵌套路由
// 7.动态路由 语法  :动态路由参数  使用$route.params获取参数,使用props获取路由参数
// 8.命名路由
// 9.声明式导航 <router-link> 编程式导航 router.push()  router.go() router.replace()
// 10 全局导航守卫 会拦截每个路由规则,对每个路由进行访问权限控制,全局前置守卫beforeEach()  全局后置守卫afterEach() 
import {
	RouterView,
	createRouter,
	createWebHashHistory
} from 'vue-router'
import {
	h
} from 'vue'
const router = createRouter({
	history: createWebHashHistory(),
	routes: [{
			path: '/',
			redirect: '/login', //路由重定向
		},
		{
			path: '/login',
			component: () => import('./components/Login.vue')
		},
		{
			path: '/home',
			name: 'home', //命名路由
			component: () => import('./components/Home.vue'),
			redirect:'/home/users',
			//嵌套路由
			children: [{
					path: 'users',
					component: {render:()=>h(RouterView)}, //如果父容器只充当容器，可以直接渲染RouterView组件
					children: [{
							path: '',
							component: () => import('./components/subcomponents/MyUsers.vue')
						},
						{
							path: ':id',
							name: 'details',
							component: () => import('./components/user/MyUserDetail.vue'),
							props: true
						}
					]
				},
				{
					path: 'rights',
					component: () => import('./components/subcomponents/MyRights.vue')
				},
				{
					path: 'goods',
					component: () => import('./components/subcomponents/MyGoods.vue')
				},
				{
					path: 'orders',
					component: () => import('./components/subcomponents/MyOrders.vue')
				},
				{
					path: 'settings',
					component: () => import('./components/subcomponents/MySettings.vue')
				},
			]
		},

	]
})
export default router